<template>
    <div class="proList">
        <el-form inline label-width="80px" @submit.prevent :model="searchParams" ref="searchForm">
            <el-form-item prop="search">
                <el-input v-model="searchParams.search" placeholder="请输入...."></el-input>
            </el-form-item>
            <el-form-item label="分类选择" prop="category">
                <el-select v-model="searchParams.category" clearable placeholder="请选择分类">
                    <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandler">搜索</el-button>
                <el-button type="primary" @click="resetHandler('searchForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" border style="width: 100%">
            <!-- <el-table-column prop="proid" label="编号" width="300"></el-table-column> -->
            <!-- <el-table-column prop="desc" label="商品描述"></el-table-column> -->
            <el-table-column prop="proname" label="商品名称" width="180" fixed>
                <template #default="{ row: { proname } }">
                    <div class="name">
                        <a :title="proname">{{ proname }}</a>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="img" label="商品图片" width="180" align="center">
                <template #default="slotScope">
                    <el-image style="width: 50px; height: 50px" :src="slotScope.row.img1"
                        :preview-src-list="[slotScope.row.img1, slotScope.row.img2, slotScope.row.img3, slotScope.row.img4]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="originprice" label="商品价格" width="180">
                <template #default="{ row: { originprice, discount } }">
                    {{ discount == 10 ? originprice : (originprice * discount / 10).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="originprice" label="商品折扣" width="180">
                <template #default="{ row: { discount } }">
                    {{ discount == 10 ? "暂无折扣" : discount }}
                </template>
            </el-table-column>
            <el-table-column prop="sales" label="销量" width="180">
                <template #default="{ row: { sales } }">
                    {{ sales }}
                </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="180">
                <template #default="{ row: { issale, stock } }">
                    {{ issale ? stock : 0 }}
                </template>
            </el-table-column>
            <!-- 根据权限等级 展示内容   超级管理员 / 普通管理员  显示    普通用户不显示->此功能  -->
            <template v-if="isAdmin">
                <el-table-column prop="isseckill" label="开启秒杀" width="180">
                <template #default="slotScope">
                    <el-switch v-model="slotScope.row.isseckill" :active-value="1" :inactive-value="0"
                        active-color="#13ce66" inactive-color="#ff4949"
                        @change="updateIsseckillHandler(slotScope.row.proid, $event)"></el-switch>
                </template>
            </el-table-column>
            </template>
            <el-table-column prop="isrecommend" label="开启推荐" width="180">
                <template #default="slotScope">
                    <!-- :disabled="isNormal"  普通用户禁止使用此功能 -->
                    <el-switch  :disabled="isNormal"  v-model="slotScope.row.isrecommend" :active-value="1" :inactive-value="0"
                        active-color="#13ce66" inactive-color="#ff4949"
                        @change="updateIsrecommendHandler(slotScope.row.proid, $event)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="isrecommend" label="操作" width="180" fixed="right">
                <template #default="{ row: { proid } }">
                    <el-button @click="lookUpHandler(proid)">查看</el-button>
                    <el-button v-if="isSuperAdmin">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pageBox">
            <!-- 
                :total="total"     总数据(从接口来)
                :current-page.sync="pageParams.count"  默认显示那一页
                :page-size.sync="pageParams.limitNum"   每页显示多少条
                :page-sizes="[5, 10, 20, 30, 50]"       page下拉框的条目

             -->
            <el-pagination class="page" :total="total" :current-page.sync="pageParams.count"
                :page-size.sync="pageParams.limitNum" :page-sizes="[5, 10, 20, 30, 50]" background
                layout="prev, pager, next,total,sizes,jumper"></el-pagination>
        </div>
        <el-drawer direction="rtl" title="我是标题" :visible.sync="isShowDrawer" :with-header="false">
            <el-container>
                <!-- <el-header>商品详情</el-header> -->
                <el-main>
                    <el-descriptions title="商品详情" :column="2" border>
                        <el-descriptions-item label="商品名称" span="2">{{ info.proname }}</el-descriptions-item>
                        <el-descriptions-item label="分类">{{ info.category }}</el-descriptions-item>
                        <el-descriptions-item label="品牌">{{ info.brand }}</el-descriptions-item>
                        <el-descriptions-item label="图片" span="2">
                            <el-image style="width:100px;height:100px" :src="info.img1"
                                :preview-src-list="[info.img1,info.img2,info.img3,info.img4]"
                            >
                            </el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="价格">
                            {{ info.discount == 10 ?info.originprice:(info.originprice*info.discount/10).toFixed(2)*1 }}
                        </el-descriptions-item>
                        <el-descriptions-item label="折扣"  v-if="info.discount!=10">
                            {{ info.discount}}
                        </el-descriptions-item>
                        <el-descriptions-item label="销量">
                                {{ info.sales}}
                        </el-descriptions-item>
                        <el-descriptions-item label="库存">
                                {{ info.issale?info.stock:0}}
                        </el-descriptions-item>
                        <el-descriptions-item label="秒杀活动" v-if="info.isseckill">
                            秒杀活动以开启
                        </el-descriptions-item>
                        <el-descriptions-item label="推荐" v-if="info.isrecommend">
                            官方推荐
                        </el-descriptions-item>
                       

                   
                    </el-descriptions>
                </el-main>
            </el-container>
        </el-drawer>
    </div>
</template>

<script>
import { getProListAPI, updateIsseckillAPI, updateIsrecommendAPI, getCategoryAPI, searchProAPI, getProDetailAPI } from "@/api/product"

import authority from "@/mixins/authority"

export default {
    name: "ProListView",
    mixins:[authority],
    data() {
        return {
            pageParams: {
                count: 1,
                limitNum: 5,
            },
            searchParams: {
                search: "",
                category: "",
            },
            list: [],
            total: 0,
            options: [],
            isShowDrawer: false,
            info: {},
        }
    },
    methods: {
        async getProList() {
            try {
                var res = await getProListAPI(this.pageParams);
                console.log("res", res);
                this.list = res.data;
                this.total = res.total
            } catch (err) {
                this.$message.error(err.message);
                throw err;
            }
        },
        async updateIsseckillHandler(proid, flag) {
            console.log(proid, flag, {
                proid: proid,
                flag: !!flag
            });
            try {
                var res = await updateIsseckillAPI({
                    proid: proid,
                    flag: !!flag
                });
                console.log("res", res);
            } catch (err) {
                this.$message.error(err.message);
                throw err;
            }
        },
        async updateIsrecommendHandler(proid, flag) {
            console.log(proid, flag, typeof flag);
            try {
                var res = await updateIsrecommendAPI({
                    proid: proid,
                    flag: !!flag
                });
                console.log("res", res);
            } catch (err) {
                this.$message.error(err.message);
                throw err;
            }
        }, // 
        async getCategory() {
            try {
                var res = await getCategoryAPI();
                console.log("商品分类", res);
                this.options = res.data;
            } catch (err) {
                this.$message.error(err.message);
                throw err;
            }
        },
        async searchPro() {
            try {
                var res = await searchProAPI(this.searchParams);
                console.log("查询商品", res);
                this.list = res.data;
            } catch (err) {
                this.$message.error(err.message);
                throw err;
            }

        },
        searchHandler() {
            this.searchPro();
        },
        resetHandler(formName) {
            if (!this.searchParams.category) {  // 如果分类数据为"" => 没有选择分类 可能只有关键词
                this.searchPro();
            }
            console.log(11111, this.$refs[formName]);
            this.$refs[formName].resetFields();
        },
        async lookUpHandler(proid) {
            try {
                var res = await getProDetailAPI({
                    proid
                });
                console.log("查询商品详情", res);
                this.info = res.data[0];

                this.isShowDrawer = true;
            } catch (err) {
                this.$message.error(err.message);
                throw err;
            }

        },
    },
    watch: {
        // 深度监听 -> pageParams数据改变 -> 重新请求新的数据 -> 页面更新
        pageParams: {
            handler: function () {
                console.log("count或limitNum发生了改变");
                this.getProList();
            },
            deep: true,
        },
        "searchParams.category"(newVal, oldVal) {
            console.log("category改变了", newVal, oldVal);
            this.searchPro();
        }
    },
    mounted() {
        this.getProList();
        this.getCategory();
    }
}
</script>

<style lang="scss" scoped>
.name {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page {
    margin-top: 20px;
    float: right;
}
</style>